<template>
	<view class="avatar">
		<view class="avatar-left">
			<image class="img" :src="avatar" mode="aspectFit" />
			<view class="name">
				<view class="realname">
					<text class="firstname">{{userInformation.fields.first_name}}</text>
					<text class="lastname">{{userInformation.fields.last_name}}</text>
				</view>
				<text class="username">账号名：{{userInformation.fields.username}}</text>
			</view>
		</view>
		<view class="icon-arrow">
			<img class="icon-arrow-img" src="/static/icon/箭头.png" alt="">
		</view>
	</view>

	<view class="userInfo">
		<view class="item">
			<text class="key">邮箱</text>
			<view class="value-map">
				<text class="value">{{userInformation.fields.email}}</text>
			</view>
		</view>
	</view>

	<view class=" login_out">
		<button type="default" @click="login_out_method">
			{{login_outText}}
		</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				login_outText: '',
				userInformation: {
					"fields": {
						"password": "",
						"last_login": "",
						"is_superuser": "",
						"username": "",
						"first_name": "",
						"last_name": "",
						"email": "",
						"is_staff": "",
						"is_active": "",
						"date_joined": "",
						"groups": [],
						"user_permissions": [],
						"avatar": ""
					}
				},
				avatar: "",
			}
		},
		methods: {
			login_out_method() {
				var loginUser = uni.getStorageSync('loginUser')
				if (loginUser) {
					uni.showModal({
						title: '确认退出',
						content: '您确定要退出当前用户吗？',
						success: (res) => {
							if (res.confirm) {
								if (loginUser) {
									uni.clearStorageSync('loginUser')
								}
								var pages = getCurrentPages()
								uni.setStorageSync('current-path', pages[0].$page.path)
								uni.redirectTo({
									url: '/pages/login/login'
								})
							}
						}
					})
				} else {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			}
		},
		onLoad: function() {
			const loginUser = uni.getStorageSync('loginUser')
			const LoginResponse = uni.getStorageSync('LoginResponse')
			console.log('头像地址（后端）：',LoginResponse.avatar)
			this.avatar = 'http://127.0.0.1:8002/' + LoginResponse.avatar
			if (loginUser) {
				this.login_outText = '退出登录'
				let that = this
				/**
				 * 发送请求到后端获取用户信息
				 */
				uni.request({
					url: 'http://127.0.0.1:8002/userInfo/',
					method: "POST",
					data: {
						username: loginUser.username
					},
					success(res) {
						if (res.data.code == 2000) {
							console.log("初始化“我的”页面的数据res.data：", res.data)
							// that.userInformation.fields.avatar = res.data.avatar
							that.userInformation = res.data.data[0]
						}
					}
				})
			} else {
				this.login_outText = '登录'
			}
		}
	}
</script>

<style>
	.avatar{
		display: flex;
		justify-content: space-between;
	}
	
	.avatar-left {
		display: flex;
		padding: 40rpx;
	}

	.avatar .img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.avatar .name {
		margin-left: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.avatar .name .realname .firstname {
		color: darkblue;
		font-size: 40rpx;
	}

	.avatar .name .realname .lastname {
		color: black;
		margin-left: 20rpx;
		font-size: 40rpx;
	}

	.avatar .name .username {
		font-weight: 900;
	}
	
	.icon-arrow{
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}
	
	.icon-arrow-img{
		width: 40rpx;
	}

	.userInfo {
		background-color: rgba(0, 0, 0, 0.03);
		padding: 40rpx 0;
	}

	.userInfo .item {
		height: 120rpx;
		line-height: 120rpx;
		background-color: white;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.userInfo .item .value-map {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.userInfo .item .value-map .arrow {
		width: 20rpx;
		height: 20rpx;
		border-top: 1px solid black;
		border-right: 1px solid black;
		transform: rotate(45deg);
		margin-left: 20rpx;
	}

	.login_out {
		position: fixed;
		bottom: 10%;
		left: 50%;
		width: 80%;
		/* 移动，可以改变元素在页面中 沿X轴和Y轴的位置 */
		transform: translateX(-50%);
	}
</style>
